<template>
    <div class="goodsActionTab font-size-12-pk">
        <div class="d-flex-cpb-pk iconWrap">
            <div class="itemWrap iconContent">
                <van-icon class-prefix="pk-icon" name="commodity_business" size="20"></van-icon>
                <div>商家</div>
            </div>
            <div class="itemWrap">
                <van-icon class-prefix="pk-icon" name="commodity_small_shop" size="20"></van-icon>
                <div>小店</div>
            </div>
            <div class="itemWrap">
                <van-icon class-prefix="pk-icon" name="shopping-cart" size="20"></van-icon>
                <div>购物车</div>
            </div>
        </div>
        <!-- 按钮1------------->
        <!-- 拼团-->
        <div v-if="beGroup" class="activeBtn bg-yellow itemWrap">
            <div v-if="isVip">单独购</div>
            <div v-else>单独购</div>
            <div>￥59.9</div>
        </div>
        <!-- 普通-->
        <div v-else class="activeBtn bg-yellow itemWrap">
            <div v-if="isVip">自购省</div>
            <div v-else @click="handleBuy('00')">加入购物车</div>
            <div v-if="isVip">￥59.9</div>
        </div>
        <!-- 按钮2------------->
        <!-- 拼团-->
        <div v-if="beGroup&&isVip" class="activeBtn bg-FF6 itemWrap">
            <div>拼团价</div>
            <div>￥159.9-￥159.9</div>
        </div>
        <!-- 按钮3------------->
        <!-- 拼团-->
        <div v-if="beGroup" class="activeBtn bg-red-pk itemWrap">
            <div v-if="isVip">分享赚</div>
            <div v-else>拼团价</div>
            <div>￥59.9</div>
        </div>
        <!-- 普通-->
        <div v-else class="activeBtn bg-red-pk itemWrap">
            <div v-if="isVip">分享赚</div>
            <div v-else @click="handleBuy('00')">立即购买</div>
            <div v-if="isVip">￥59.9</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goodsActionTab",
        props: {
            goodsInfo: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        components: {},

        data() {
            return {
            }
        },

        created() {
        },
        computed: {
            typeId() {
                return this.goodsInfo.typeId
            },
            isVip() {
                return this.$store.state.isVip
            },
            beGroup() {
                return this.goodsInfo.beGroup == "1"
            }
        },
        watch: {
        },
        methods: {
            handleBuy(value) {
                /*value:
                * 00 新秀 普通商品
                 */
                this.$api.checkLoginStatus().then(res => {
                    if(this.$resResult(res)) {
                        this.$emit("change", value)
                    }else {
                        this.$router.push({path: "/login"})
                    }
                })
            },
            handleShare() {

            }
        }
    }
</script>

<style lang="scss" scoped>
    .goodsActionTab {
        display: flex;
        width: 100vw;
        height: 48px;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        background: var(--white-color);
        text-align: center;
        .itemWrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .iconWrap {
            flex: 1;
            min-width: 9em;
            padding: 4px 6px;
            .iconContent {
                min-width: 3em;
            }
        }
        .activeBtn {
            color: var(--white-color);
            padding: 4px;
            width: 100px;
        }
    }
</style>
